import _http from '@/_http'
import { List, Button, Toast, Modal } from 'antd-mobile'
import React, { useCallback, useEffect, useState } from 'react'

import EditModal from './EditModal'
const alert = Modal.alert;

export default function Cate() {
  const [cates, setCates] = useState(null)
  const [visible, setvisible] = useState(false)
  const [editId, seteditId] = useState('')
  const [rowData, setrowData] = useState({})
  const [store, setStore] = useState('1')

  useEffect(async () => {
    await getData()
  }, [store])

  const getData = useCallback(async () => {
    const res = await _http('/cate/list?store=' + store)
    setCates(res.data.data)
  }, [store])

  const addShow = useCallback(() => {
    setvisible(true)
  }, [])

  const onOk = useCallback(() => {
    setvisible(false)
    seteditId('')
    setrowData({})
    getData()
  }, [])


  const editShow = useCallback((row) => {
    seteditId(row.catid)
    setvisible(true);
    console.log(row, 'row');
    setrowData({
      name: row.name,
      remark: row.remark,
      sort: row.sort || 0
    })

    console.log(row);
  }, []);

  const deleteItem = useCallback(async (id) => {
    // prompt();
    console.log(id);
    const res = await _http('/cate/del', { catid: id }, 'post')
    if (res.data.code === 1) {
      Toast.success('删除成功！')
    } else {
      Toast.fail(res.data.msg)
    }
    getData()
  }, []);

  return (
    <div>
      <List>
        <select value={store} onChange={(e) => { console.log(e.currentTarget.value, 'e.currentTarget.value'); setStore(e.target.value); }}>
          <option value="1">味好佳</option>
          <option value="2">左记</option>
        </select>
      </List>
      <List>
        {cates ? cates.map(cate => (
          <List.Item key={cate.catid}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>{cate.name}</div>
              <div>
                <Button size="small" onClick={() =>
                  alert("提示", "确认删除该食物吗?", [
                    {
                      text: "取消",
                      onPress: () => console.log("cancel"),
                    },
                    {
                      text: "删除",
                      onPress: async () => {
                        await deleteItem(cate.catid)
                      },
                    },
                  ])
                }>删除</Button>
                <Button size="small" onClick={(() => editShow(cate))}>修改</Button>
              </div>
            </div>
          </List.Item>
        )) : null}
      </List>
      {/* {visible ? <EditModal /> : null} */}
      <EditModal visible={visible} editId={editId} rowData={rowData} onOk={onOk} />
      <div style={{ position: 'fixed', bottom: '10px', right: '10px' }}>
        <img src={require('@/icons/add.png').default} alt="添加" onClick={() => addShow()} />
        <img src={require('@/icons/refresh.png').default} alt="刷新" onClick={() => getData()} />
      </div>
    </div>
  )
}
